<template>
  <div class="add">
    <el-dialog
      fullscreen
      :title="{ add: '新增题库测试', edit: '编辑题库测试' }[mode]"
      :visible.sync="show"
      @close="handleClose"
    >
      <div class="container">
        <!-- 表单1 -->
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="80px"
          label-position="left"
          class="form"
        >
          <el-form-item prop="subject" label="学科" class="formItem">
            <el-select v-model="form.subject" style="width:250px">
              <el-option
                v-for="item in subjectList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="阶段" prop="step" class="formItem">
            <el-select
              v-model="form.step"
              placeholder="请选择"
              style="width:250px"
            >
              <el-option
                v-for="item in stepList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业" prop="enterprise" class="formItem">
            <el-select
              v-model="form.enterprise"
              placeholder="请选择"
              style="width:250px"
            >
              <el-option
                v-for="item in enterpriseList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市" prop="city" class="formItem">
            <el-cascader
              v-model="form.city"
              :options="regionData"
              style="width:250px"
            />
          </el-form-item>
          <el-form-item
            label="题型"
            prop="type"
            class="formItem"
            @change="changeType"
          >
            <el-radio-group v-model="form.type" style="width:280px">
              <el-radio
                v-for="item in typeList"
                :key="item.value"
                :label="item.value"
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="难度" prop="difficulty" class="formItem">
            <el-radio-group v-model="form.difficulty" style="width:280px">
              <el-radio
                v-for="item in difficultList"
                :key="item.value"
                :label="item.value"
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 分割线 -->
          <el-divider class="divider" />
          <el-form-item label="试题标题" prop="title" class="text">
            <quill-editor
              class="editor"
              ref="myTextEditor"
              v-model="form.title"
            >
            </quill-editor>
          </el-form-item>
          <el-form-item :label="labelObj[form.type]" :prop="propObj[form.type]">
            <div v-if="form.type === 1">
              <div
                v-for="item in form.select_options"
                :key="item.label"
                class="item"
              >
                <el-radio
                  v-model="form.single_select_answer"
                  :label="item.label"
                >
                  {{ item.label }}
                </el-radio>
                <el-input v-model="item.text" class="input" />
                <Upload :imgShow="true" v-model="item.image" />
              </div>
            </div>
            <div v-else-if="form.type === 2">
              <div
                v-for="item in form.select_options"
                :key="item.label"
                class="item"
              >
                <el-checkbox
                  v-model="form.multiple_select_answer"
                  :label="item.label"
                >
                  {{ item.label }}
                </el-checkbox>
                <el-input v-model="item.text" class="input" />
                <Upload :imgShow="true" v-model="item.image" />
              </div>
            </div>
            <div v-else-if="form.type === 3">
              <el-input type="textarea" :rows="5" v-model="form.short_answer" />
            </div>
          </el-form-item>
          <el-form-item label="解析视频">
            <Upload type="video" :videoShow="true" v-model="form.video" />
            <span>只能上传视频格式文件</span>
          </el-form-item>
          <el-form-item
            label="答案解析"
            prop="answer_analyze"
            class="text"
            style="margin-bottom:50px"
          >
            <quill-editor
              class="editor"
              ref="myTextEditor"
              v-model="form.answer_analyze"
            >
            </quill-editor>
          </el-form-item>
          <!-- 分割线 -->
          <el-divider class="divider" />
          <el-form-item label="试题备注" prop="remark" style="margin-top:50px">
            <el-input type="textarea" :rows="3" v-model="form.remark" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="btn" style="text-align:center">
          <el-button @click="show = false">取消</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// 导入省市区数据
import { regionData } from 'element-china-area-data'
import { addQuestionAPI, editQuestionAPI } from '@/api/questions'
export default {
  props: {
    subjectList: {
      required: true,
      type: Array
    },
    stepList: {
      required: true,
      type: Array
    },
    enterpriseList: {
      required: true,
      type: Array
    },
    typeList: {
      required: true,
      type: Array
    },
    difficultList: {
      required: true,
      type: Array
    }
  },
  data () {
    return {
      regionData,
      show: false,
      mode: '',
      form: {
        subject: null,
        step: null,
        enterprise: null,
        city: [],
        type: 1,
        difficulty: null,
        title: '',
        select_options: [
          { label: 'A', text: '', image: '' },
          { label: 'B', text: '', image: '' },
          { label: 'C', text: '', image: '' },
          { label: 'D', text: '', image: '' }
        ],
        single_select_answer: 'A', // 单选题答案
        multiple_select_answer: [], // 多选题答案
        short_answer: '', // 简单题答案,
        answer_analyze: '',
        remark: '',
        video: ''
      },
      labelObj: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      propObj: {
        1: 'single_select_answer',
        2: 'multiple_select_answer',
        3: 'short_answer'
      },
      rules: {
        subject: [{ required: true, message: '必填', trigger: 'blur' }],
        step: [{ required: true, message: '必填', trigger: 'blur' }],
        enterprise: [{ required: true, message: '必填', trigger: 'blur' }],
        city: [{ required: true, message: '必填', trigger: 'blur' }],
        type: [{ required: true, message: '必填', trigger: 'blur' }],
        difficulty: [{ required: true, message: '必填', trigger: 'blur' }],
        title: [{ required: true, message: '必填', trigger: 'blur' }],
        answer_analyze: [{ required: true, message: '必填', trigger: 'blur' }],
        remark: [{ required: true, message: '必填', trigger: 'blur' }],
        single_select_answer: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        multiple_select_answer: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        short_answer: [{ required: true, message: '必填', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleClose () {
      this.form = {
        subject: null,
        step: null,
        enterprise: null,
        city: [],
        type: 1,
        difficulty: null,
        title: '',
        single_select_answer: 'A', // 单选题答案
        multiple_select_answer: [], // 多选题答案
        short_answer: '', // 简单题答案,
        answer_analyze: '',
        remark: '',
        video: ''
      }
      this.form.select_options = [
        { label: 'A', text: '', image: '' },
        { label: 'B', text: '', image: '' },
        { label: 'C', text: '', image: '' },
        { label: 'D', text: '', image: '' }
      ]
      this.$refs.form.resetFields()
    },
    onSubmit () {
      this.$refs.form.validate(async result => {
        if (result) {
          if (this.mode === 'add') {
            await addQuestionAPI(this.form)
            this.$message.success('新增题库成功')
          } else if (this.mode === 'edit') {
            await editQuestionAPI({
              ...this.form,
              city: this.form.city.join(',')
            })
            this.$message.success('编辑题库成功')
          }
          this.show = false
          this.$emit('getQuestionList')
        } else {
          this.$message.error('必填选项未完成')
        }
      })
    },
    // 改变题目类型时，清空相应的表单验证
    changeType () {
      this.$refs.form.clearValidate([
        'single_select_answer',
        'multiple_select_answer',
        'short_answer'
      ])
    }
  }
}
</script>

<style lang="scss" scoped>
.add {
  .container {
    width: 1000px;
    margin: 0 auto;
    .form {
      width: 800px;
      margin: 0 100px;
      .formItem {
        width: 300px;
      }
      .item {
        display: flex;
        margin-top: 20px;
        align-items: center;
        ::v-deep .input {
          width: 500px !important;
        }
      }
    }
  }
  .divider {
    width: 800px;
    margin: 0 auto;
    background-color: black;
  }
  .editor {
    width: 800px;
  }
  .text {
    ::v-deep .el-form-item__content {
      margin-left: 0 !important;
      margin-top: 50px;
    }
  }
}
</style>
